<template>
	<view class="page">
		<headnav leftText="编辑资料"></headnav>
		<view class="pageBox">
			<view class="block dls">
						<view class="head">
							<image :src="user.avatar" mode="" class="headImg"></image>		
						</view>
						 <view class="dl">
							 <view class="dt">姓名</view>
							 <view class="dd">
								 <input type="text" class="input" v-model="form_data.name" placeholder="请输入" placeholder-class="inputPla"/>
							 </view>
						 </view>
						 <view class="dl">
							 <view class="dt">地区</view>
							 <view class="dd">
								<picker @change="bindPickerChange($event,'area')" :value="form_data.area" :range="range.area" range-key="name">
									<view class="uni-input" :class="{first:form_data.area == 0}">{{range.area[form_data.area].name}}</view>
								</picker>
								<image src="/static/img/right-arrow.png" mode="" class="right-arrow"></image>
							 </view>
						 </view>
						 <view class="dl">
								 <view class="dt">学校</view>
								 <view class="dd">
									 <picker @change="bindPickerChange($event,'school')" :value="form_data.school" :range="range.school" range-key="name">
										<view class="uni-input" :class="{first:form_data.school == 0}">{{range.school[form_data.school].name}}</view>
									</picker>
									<image src="/static/img/right-arrow.png" mode="" class="right-arrow"></image>
								 </view>
						 </view>
						 <view class="dl">
								 <view class="dt">学院</view>
								 <view class="dd">
									  <picker @change="bindPickerChange($event,'college')" :value="form_data.college" :range="range.college" range-key="name">
											<view class="uni-input" :class="{first:form_data.college == 0}">{{range.college[form_data.college].name}}</view>
										</picker>
										<image src="/static/img/right-arrow.png" mode="" class="right-arrow"></image>
								 </view>
						 </view>
						 <view class="dl">
								 <view class="dt">入学年级</view>
								 <view class="dd">
									  <picker @change="bindPickerChange($event,'grade')" :value="form_data.grade" :range="range.grade" range-key="name">
											<view class="uni-input" :class="{first:form_data.grade == 0}">{{range.grade[form_data.grade].name}}</view>
									  </picker>
									  <image src="/static/img/right-arrow.png" mode="" class="right-arrow"></image>
								 </view>
						 </view>
						 <view class="dl">
								 <view class="dt">班级</view>
								 <view class="dd">
									 <picker @change="bindPickerChange($event,'class')" :value="form_data.class" :range="range.class" range-key="name">
											<view class="uni-input" :class="{first:form_data.class == 0}">{{range.class[form_data.class].name}}</view>
									  </picker>
									  <image src="/static/img/right-arrow.png" mode="" class="right-arrow"></image>
								 </view>
						 </view>
					</view>
		</view>
		
		<view class="bottoBt">
			<view class="bt bt-a" @tap='goUser'>返回查看</view>
			<view class="bt bt-a dis" v-if="!canNext2">提交</view>
			<view class="bt bt-a" v-if="canNext2" @tap="EditUser">提交</view>
		</view>
	</view>
</template>

<script>
   import { getAera, getSchool, getCollege, getGrade, getClass } from '@/api/app.js'
   import { mapMutations, mapGetters } from "vuex";
   import { editUser, getUserInfo } from '@/api/user.js'
	export default {
		data() { 
			return {
				 inputName:'',
				 form_data:{
					 area:0,
					 school:0,
					 college:0,
					 grade:0,
					 class:0,
					 name:''
				 },
				 canNext2:false,
				 range:{
					 area:[{name:'请选择','id':-100},],
					 school:[{name:'请选择','id':-100}],
					 college:[{name:'请选择','id':-100}],
					 grade:[{name:'请选择','id':-100}],
					 class:[{name:'请选择','id':-100}]
				}
		  }
		},
		onLoad() {
			this.GetAera()
		},
		watch: {
			form_data: {
			    handler(newVal, oldVal) {
			      const values = Object.values(this.form_data);
				  this.canNext2 =  values.every(value  => value != 0);
			    },
			    deep: true // 深度监听 
			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods: {
			// async editUser
			...mapMutations(["setUserInfo"]),
			async initInput() {
			   // console.log(this.userInfo);
			   const { student_name, city_name, school_name, school_college_name, start_year, class_name } = this.userInfo;
			   const { city_id, school_id, school_college_id, class_id } = this.userInfo;
			   // console.log(this.getIndex(this.range.area,"id",city_id));
			 //   this.range = {
				// 	 area:this.range.area,
				// 	 school:[{name:'请选择','id':-100},{name:school_name,'id':school_id}],
				// 	 college:[{name:'请选择','id':-100},{name:school_college_name,'id':school_college_id}],
				// 	 grade:[{name:'请选择','id':-100},{name:start_year,'id':start_year}],
				// 	 class:[{name:'请选择','id':-100},{name:class_name,'id':class_id}]
				// }
				this.GetSchool(city_id)
				this.GetCollege(school_id)
				this.GetGrade()
				const obj = {
					school_id,
					school_college_id,
					start_year
				}
				const { data } = await getClass(obj);
				const areaArray = data.unshift({'name':'请选择','id':-100})
				this.range.class = data;
				setTimeout(() => {
					this.form_data = {
						 area:this.getIndex(this.range.area,"id",city_id),
						 school:this.getIndex(this.range.school,"id",school_id),
						 college:this.getIndex(this.range.college,"id",school_college_id),
						 grade:this.getIndex(this.range.grade,"id",start_year),
						 class:this.getIndex(this.range.class,"id",class_id),
						 name:student_name
					 }
				},100)
			},
			async GetUerInfo() {
				const { data } = await getUserInfo();
				// console.log(data);
				data.avatar = this.userInfo.avatar;
				// console.log(this.userInfo.avatar);
				this.setUserInfo(data);
				uni.navigateBack();
				// this.$Router.replace('/pages/user/user')
			},
			async EditUser() {
				const post_data = {
					school_id: this.range.school[this.form_data.school].id,
					school_college_id : this.range.college[this.form_data.college].id,
					start_year : this.range.grade[this.form_data.grade].id,
					class_id : this.range.class[this.form_data.class].id,
					name : this.form_data.name
				}
				//console.log(post_data);
				const res = await editUser(post_data)
				// console.log(res);
				if(res) {
					uni.showToast({
						title:'操作成功',
						icon:'none'
					})
				    this.GetUerInfo();
				}
				// const areaArray = data.unshift({'name':'请选择','id':-100})
				// this.range.area = data;
			},
			async GetAera() {
				const { data } = await getAera()
				const areaArray = data.unshift({'name':'请选择','id':-100})
				this.range.area = data;
				this.initInput();
			},
			async GetSchool(cityId) {
				const { data } = await getSchool({city_id:cityId})
				const areaArray = data.unshift({'name':'请选择','id':-100})
				this.range.school = data;
			},
			async GetCollege(Id) {
				const { data } = await getCollege({school_id:Id})
				const areaArray = data.unshift({'name':'请选择','id':-100})
				this.range.college = data;
			},
			async GetGrade(Id) {
				const { data } = await getGrade()
				const areaArray = data.unshift({'name':'请选择','id':-100})
				this.range.grade = data;
			},
			async GetClass() {
				const school_id = this.range["school"][this.form_data["school"]].id;
				const school_college_id = this.range["college"][this.form_data["college"]].id;
				const start_year = this.range["grade"][this.form_data["grade"]].id;
				const obj = {
					school_id,
					school_college_id,
					start_year
				}
				const { data } = await getClass(obj);
				const areaArray = data.unshift({'name':'请选择','id':-100})
				this.range.class = data;
			},
			goUser() {
				uni.navigateBack();
			},
			bindPickerChange(e,type) {
			    const index = e.detail.value;
				const id = this.range[type][index].id;
				this.form_data[type] = index;
				if(type == 'area') {
					this.form_data.college = 0;
					this.form_data.school = 0;
					this.form_data.grade = 0;
					this.form_data.class = 0;
					this.range.school = [{name:'请选择',id:-100}];
					this.range.college = [{name:'请选择',id:-100}];
					this.range.grade = [{name:'请选择',id:-100}];
					this.range.class= [{name:'请选择',id:-100}];
					if (id != -100) {
						this.GetSchool(id)
					};
				} 
				if(type == 'school') {
					this.form_data.college = 0;
					this.form_data.grade = 0;
					this.form_data.class = 0;
					this.range.college = [{name:'请选择',id:-100}];
					this.range.grade = [{name:'请选择',id:-100}];
					this.range.class= [{name:'请选择',id:-100}];
					if (id != -100) { 
						this.GetCollege(id)
					}
				} 
				if(type == 'college') {
					this.form_data.grade = 0;
					this.form_data.class = 0;
					this.range.grade = [{name:'请选择',id:-100}];
					this.range.class= [{name:'请选择',id:-100}];
					if (id != -100) { 
						this.GetGrade(id)
					}
				} 
				if(type == 'grade') {
					this.range.class= [{name:'请选择',id:-100}];
					this.form_data.class = 0;
					if(id != -100) {
						this.GetClass();
					}
				} 
			},
			getIndex(array,key,value) {
				// console.log(array);
				let  index = -1;
				if(array.length > 0) {
					for(let i= 0; i < array.length; i++) {
						// console.log(array[i][key]);
						if(array[i][key] == value) {
							index = i;
						}
					}
				}
				return index;
			}
		}
	}
</script>

<style lang="scss">
   .page {
   		background-color: #f5f8fa;
   		width: 100%;
   		height: 100%;
   	}
	.head {
		height: 110rpx;
		position: relative;
	}
	.inputPla {
		 color:#d6d6d6;
	}
	.uni-input.first {
	    color: #cccccc;
	}
	.input {
		// background-color: #d6d6d6;
		width:120rpx;
		height: 80rpx;
		padding: 0 20rpx;
		// border-bottom: 1px solid #dcd7d7;
		text-align: center;
	}
	input::placeholder {
		color:#d6d6d6;
	}
	.headImg {
		width: 180rpx;
		height: 180rpx;
		padding: 25rpx;
		background-color: #fff;
		position: absolute;
		left:280rpx;
		border-radius: 50%;
		margin-left: -90rpx;
		top: -111rpx;
	}
   	.dls-h {
   		background-color: #fff;
   		padding: 37rpx 37rpx 27rpx;
   		border-radius: 26rpx;
   		margin-bottom: 20rpx;
   		.good-item {
   			margin-bottom: 10rpx;
   		}
   		.dls-h-t {
   		  font-size: 28rpx;
   		  margin-bottom: 20rpx;
   		}
   		.h-t-info {
   			display: flex;
   			justify-content: space-between;
   			.h-t-r {
   				color:#ff4f4f;
   			}
   		}
   	}
	.pageBox {
		padding-top: 130rpx;
	}
	.dls{
		background-color: #fff;
		border-radius: 26rpx;
	    padding:  0 40rpx;
		margin-bottom: 30rpx;
		.dl {
			border-bottom: 1px solid #f5f5f5;
			display: flex;
			justify-content: space-between;
			&:last-of-type {
				border-bottom: none;
			}
			.right-arrow {
				width: 14rpx;
				height: 22rpx;
				margin-left: 22rpx;
				position: relative;
				top:2rpx;
			}
			.dt, .dd {
				height: 100rpx;
				width: 300rpx;
				display: flex;
				align-items: center;
				font-size: 30rpx;
				.uni-select {
					border: none !important;
					font-size: 30rpx;
				}
				.uni-select__input-text {
					// width: auto;
					margin-right: 10rpx;
					text-align: right;
				}
				.uni-popper__arrow_bottom {
					left: 90%;
				}
				.uni-select__input-placeholder {
					font-size: 30rpx;
					color:#d6d6d6;
				}
			}
			.dd {
				display: flex;
				justify-content: flex-end;
			}
		}
		
	}
	.bottoBt {
		padding: 155rpx  55rpx 0;
		@include bt-s-2();
	}
</style>
